import _ from 'lodash'
import { gsap } from "gsap";
import ScrollTrigger from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
// gsap.to("h2.title", {duration: 1, opacity: 0.3});
// gsap.to(".box", {duration: 2, x: 500, rotation: 360});
// gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5});

// gsap.from(".box", {
//     duration: 2,
//     scale: 0.5, 
//     opacity: 0, 
//     delay: 0.5, 
//     stagger: 0.2,
//     ease: "elastic", 
//     force3D: true,
//   });
  
//   document.querySelectorAll(".box").forEach(function(box) {
//     box.addEventListener("click", function() {
//       gsap.to(".box", {
//         duration: 0.5, 
//         opacity: 0, 
//         y: -100, 
//         stagger: 0.1,
//         ease: "back.in"
//       });
//     });
//   });

// var play = document.querySelector("#restart");
var tl = gsap.timeline();
// tl.from(".box", {
//     duration: 2,
//     scale: 0.5, 
//     opacity: 0, 
//     delay: 0.5, 
//     stagger: 0.2,
//     ease: "elastic", 
//     force3D: true,
//   })
// tl.to(".grey", {duration: 2, x: 500, rotation: 360});
tl.fromTo(".pink",{opacity: 0.1},{scrollTrigger:{
    trigger:".pink",
    start:'top bottom',
    end:"top 0",
    scrub:1,
    snap:1,
},duration: 1,ease:'none',opacity:1}).fromTo(".grey",{opacity: 0.1},{scrollTrigger:{
      trigger:".grey",
      start:'top bottom',
      end:"top 0",
      scrub:1,
      snap:1,
      // markers:true,
  },duration: 1,ease:'none',opacity:1}).fromTo(".orange",{opacity: 0.1},{scrollTrigger:{
    trigger:".orange",
    start:'top bottom',
    end:"top 0",
    scrub:1,
    snap:1,
    // markers:true,
},duration: 2,ease:'none',opacity:1}).fromTo(".blue",{opacity: 0.1},{scrollTrigger:{
    trigger:".blue",
    start:'top bottom',
    end:"top 0",
    scrub:1,
    snap:1,
    // markers:true,
},duration: 1,ease:'none',opacity:1})

// tl.to(".grey", {duration: 1, x: 500,rotation:360})
//   .to(".orange", {duration: 1, x: 200, scale: 0.2})
//   .to(".grey", {duration: 1, x: 200, scale: 2, y: 20}, "greyAndPink") 
//   .to(".pink", {duration: 1, x: 200, rotation: 360}, "greyAndPink"); 
//   play.onclick = function(){
//       tl.restart()
//   }

//   var demo = {a:0},
//   scoreDisplay = document.getElementById("scoreDisplay");
  

//      gsap.to(demo,{
//          repeat:2,
//          yoyo:true,
//       duration:10,
//       a:60,
//       onUpdate:showScore
//   })
  

//   function showScore() {
//       scoreDisplay.innerHTML = demo.a.toFixed(2);
//   }